import { React, useState, useEffect } from 'react'
import { Flex, Input, Button, Upload } from 'antd';
import {
  HomeOutlined,
  UploadOutlined,
  DownOutlined
} from '@ant-design/icons';
function AlDesign() {
  const [activeTab, setActiveTab] = useState(0);
  const data = [
    {
      title: '大字封面',
      image: 'https://gaoding-market.dancf.com/market-operations/independent/side/2b718f467e734432b478180ddc79ee91/1724834159124.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp'
    },
    {
      title: '科普攻略',
      image: 'https://gaoding-market.dancf.com/market-operations/independent/side/c2d17111bb34495bbc3ddb76084f5e5d/1724832955474.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp'
    },
    {
      title: '图文封面',
      image: 'https://gaoding-market.dancf.com/market-operations/independent/side/cee611ca2dd6466aaf2c3c63a5a361bf/1734949712866.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp'
    },
    {
      title: '人物封面',
      image: 'https://gaoding-market.dancf.com/market-operations/independent/side/cdc72e9dd14348a789850ee226c2d995/1734949740943.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp'
    },
    {
      title: '插画封面',
      image: 'https://gaoding-market.dancf.com/market-operations/independent/side/2b718f467e734432b478180ddc79ee91/1724834159124.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp'
    },
    {
      title: '备忘录',
      image: 'https://gaoding-market.dancf.com/market-operations/independent/side/dfbe949dd6b048f2a53de3ebc590d879/1733755165370.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp'
    },
    {
      title: '拼图封面',
      image: 'https://gaoding-market.dancf.com/market-operations/independent/side/f1fbe49931ff4163bc14f7d9bd3a97ac/1734949783738.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp'
    },
    {
      title: '书摘语录',
      image: 'https://gaoding-market.dancf.com/market-operations/independent/side/1fed6c24ff8845e0a721b2078174d3d5/1734949797472.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp'
    },
  ]
  const data2 = [
    {
      title: '商品主图',
      image: 'https://st0.dancf.com/market-operations/market/side/1706771166610.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp'
    },
    {
      title: '竖版电商海报',
      image: 'https://st0.dancf.com/market-operations/market/side/1706771293727.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp'
    },
    {
      title: '横版电商海报',
      image: 'https://st0.dancf.com/market-operations/market/side/1706771241747.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp'
    },
    {
      title: '产品营销',
      image: 'https://st0.dancf.com/market-operations/market/side/1706771276140.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp'
    }
  ]
  const data3 = [
    {
      title: 'LOGO',
      image: 'https://st0.dancf.com/market-operations/market/side/1706771222344.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp'
    },
    {
      title: '公众号次图',
      image: 'https://st0.dancf.com/market-operations/market/side/1706771742978.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp'
    },
    {
      title: '横版海报',
      image: 'https://st0.dancf.com/market-operations/market/side/1706771153985.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp'
    },
    {
      title: '竖版视频封面',
      image: 'https://st0.dancf.com/market-operations/market/side/1706771334652.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp'
    },
    {
      title: '公众号首图',
      image: 'https://st0.dancf.com/market-operations/market/side/1706771128912.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp'
    },
    {
      title: '横版视频封面',
      image: 'https://st0.dancf.com/market-operations/market/side/1706771378546.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp'
    }
  ]
  const data4 = [
    {
      title: '人物宣传',
      image: 'https://st0.dancf.com/market-operations/market/side/1706771347077.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp'
    },
    {
      title: '日签问候',
      image: 'https://st0.dancf.com/market-operations/market/side/1706771306831.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp'
    },
    {
      title: '喜报',
      image: 'https://st0.dancf.com/market-operations/market/side/1706771561928.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp'
    },
    {
      title: '邀请函',
      image: 'https://st0.dancf.com/market-operations/market/side/1706771357241.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp'
    },
    {
      title: '人物头像',
      image: 'https://st0.dancf.com/market-operations/market/side/1706771573149.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp'
    },
    {
      title: '朋友圈封面',
      image: 'https://st0.dancf.com/market-operations/market/side/1706771583904.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp'
    },
    {
      title: '书单',
      image: 'https://st0.dancf.com/market-operations/market/side/1706771388817.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp'
    },
    {
      title: '拼图PLOG',
      image: 'https://st0.dancf.com/market-operations/market/side/1706771496178.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp'
    },
    {
      title: '贺卡',
      image: 'https://st0.dancf.com/market-operations/market/side/1706771539349.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp'
    },
    {
      title: '倒计时',
      image: 'https://st0.dancf.com/market-operations/market/side/1706771549277.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp'
    },
    {
      title: '晒单海报',
      image: 'https://st0.dancf.com/market-operations/market/side/1706771594918.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp'
    }
  ]
  const [hoveredImage, setHoveredImage] = useState(null);
  const [hoveredImage1, setHoveredImage1] = useState(null);
  const [hoveredImage2, setHoveredImage2] = useState(null);
  const [hoveredImage3, setHoveredImage3] = useState(null);
  const images = [
    'https://st0.dancf.com/market-operations/market/side/1686660921912.png?x-oss-process=image%2Fresize%2Cw_200%2Fformat%2Cwebp',
    'https://st0.dancf.com/market-operations/market/side/1686661350471.png?x-oss-process=image%2Fresize%2Cw_200%2Fformat%2Cwebp',
    'https://st0.dancf.com/market-operations/market/side/1714024304097.jpg?x-oss-process=image%2Fresize%2Cw_200%2Fformat%2Cwebp',
    'https://st0.dancf.com/market-operations/market/side/1713927132589.png?x-oss-process=image%2Fresize%2Cw_200%2Fformat%2Cwebp',
    'https://st0.dancf.com/market-operations/market/side/1713927290924.png?x-oss-process=image%2Fresize%2Cw_200%2Fformat%2Cwebp',
  ]
  //搜索框
  const { TextArea } = Input;
  const onChange = (e) => {
    console.log('Change:', e.target.value);
  };
  //上传
  const [fileList, setFileList] = useState([

  ]);
  const handleChange = (info) => {
    let newFileList = [...info.fileList];
    newFileList = newFileList.slice(-2);
    newFileList = newFileList.map((file) => {
      if (file.response) {
        file.url = file.response.url;
      }
      return file;
    });
    setFileList(newFileList);
  };
  const props = {
    action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',
    onChange: handleChange,
    multiple: true,
  };
  //素材数据
  const image2 = [
    'https://gaoding-market.dancf.com/market-operations/independent/side/ba5b8940f5e14dfbaa22ed75757016fc/1721975791166.png',
    'https://gaoding-market.dancf.com/market-operations/independent/side/5c406ba0a64f42188b39cdb69c9e4620/1721975625495.png',
    'https://gaoding-market.dancf.com/market-operations/independent/side/5c32770e1ed14a4cac229be6e434e094/1721975478975.png',
    'https://gaoding-market.dancf.com/market-operations/independent/side/2c97211051a9461d94feda9ac2a2de1c/1721975428852.png',
    'https://gaoding-market.dancf.com/market-operations/independent/side/eda39f9b882048dbb6734e21f8636523/1721975322490.png',
    'https://gaoding-market.dancf.com/market-operations/independent/side/bf7ae7b29e3742578850edcaec3a919a/1721975280742.png',
  ]
  const tabs = [
    {
      id: 0, title: '设计', content: [
        <div key={0}>
          <h2>AI设计</h2>
          <h3>小红书</h3>
          <div style={{ display: 'flex', flexWrap: 'wrap', textAlign: 'center' }}>
            {data.map((src, index) => (
              <div
                style={{
                  backgroundColor: '#f5f5f5',
                  padding: '10px',
                  display: 'inline-block',
                  marginRight: '10px',
                  marginTop: '10px',
                }}
                key={index}
                className="image-container"
                onMouseEnter={() => setHoveredImage(index)} // 鼠标移入时更新状态
                onMouseLeave={() => setHoveredImage(null)}  // 鼠标移出时恢复状态
              >
                <img
                  src={src.image}
                  alt={`Image ${index + 1}`}
                  style={{
                    width: '100px',
                    height: '100px',
                    transform: hoveredImage === index ? 'scale(1.2)' : 'scale(1)', // 判断是否放大
                    transition: 'transform 0.3s ease', // 添加过渡效果
                  }}
                />
                <p>{src.title}</p>
              </div>
            ))}
          </div>
          <h3>电商</h3>
          <div style={{ display: 'flex', flexWrap: 'wrap', textAlign: 'center' }}>
            {data2.map((src, index) => (
              <div
                style={{
                  backgroundColor: '#f5f5f5',
                  padding: '10px',
                  display: 'inline-block',
                  marginRight: '10px',
                  marginTop: '10px',
                }}
                key={index}
                className="image-container"
                onMouseEnter={() => setHoveredImage1(index)} // 鼠标移入时更新状态
                onMouseLeave={() => setHoveredImage1(null)}  // 鼠标移出时恢复状态
              >
                <img
                  src={src.image}
                  alt={`Image ${index + 1}`}
                  style={{
                    width: '100px',
                    height: '100px',
                    transform: hoveredImage1 === index ? 'scale(1.2)' : 'scale(1)', // 判断是否放大
                    transition: 'transform 0.3s ease', // 添加过渡效果
                  }}
                />
                <p>{src.title}</p>
              </div>
            ))}
          </div>
          <h3>新媒体</h3>
          <div style={{ display: 'flex', flexWrap: 'wrap', textAlign: 'center' }}>
            {data3.map((src, index) => (
              <div
                style={{
                  backgroundColor: '#f5f5f5',
                  padding: '10px',
                  display: 'inline-block',
                  marginRight: '10px',
                  marginTop: '10px',
                }}
                key={index}
                className="image-container"
                onMouseEnter={() => setHoveredImage2(index)} // 鼠标移入时更新状态
                onMouseLeave={() => setHoveredImage2(null)}  // 鼠标移出时恢复状态
              >
                <img
                  src={src.image}
                  alt={`Image ${index + 1}`}
                  style={{
                    width: '100px',
                    height: '100px',
                    transform: hoveredImage2 === index ? 'scale(1.2)' : 'scale(1)', // 判断是否放大
                    transition: 'transform 0.5s ease', // 添加过渡效果
                  }}
                />
                <p>{src.title}</p>
              </div>
            ))}
          </div>
          <h3>私域</h3>
          <div style={{ display: 'flex', flexWrap: 'wrap', textAlign: 'center' }}>
            {data4.map((src, index) => (
              <div
                style={{
                  backgroundColor: '#f5f5f5',
                  padding: '10px',
                  display: 'inline-block',
                  marginRight: '10px',
                  marginTop: '10px',
                }}
                key={index}
                className="image-container"
                onMouseEnter={() => setHoveredImage3(index)} // 鼠标移入时更新状态
                onMouseLeave={() => setHoveredImage3(null)}  // 鼠标移出时恢复状态
              >
                <img
                  src={src.image}
                  alt={`Image ${index + 1}`}
                  style={{
                    width: '100px',
                    height: '100px',
                    transform: hoveredImage3 === index ? 'scale(1.2)' : 'scale(1)', // 判断是否放大
                    transition: 'transform 0.3s ease', // 添加过渡效果
                  }}
                />
                <p>{src.title}</p>
              </div>
            ))}
          </div>
        </div>
      ]
    },
    {
      id: 1, title: '绘画', content: [
        <div key={1} style={{ width: '100%', height: '100%', display: 'flex', flexWrap: 'wrap' }}>
          <div style={{ width: '400px', height: '200vh', borderRight: '1px solid #ccc', padding: '20px' }}>
            <h2>AI绘图</h2>
            <div style={{ display: 'flex', flexWrap: 'wrap' }}>
              {images.map((src, index) => (
                <div
                  style={{
                    backgroundColor: '#f5f5f5',
                    padding: '10px',
                    display: 'inline-block',
                    marginRight: '10px',
                    marginTop: '10px',
                  }}
                  key={index}
                  className="image-container"
                  onMouseEnter={() => setHoveredImage(index)} // 鼠标移入时更新状态
                  onMouseLeave={() => setHoveredImage(null)}  // 鼠标移出时恢复状态
                >
                  <img
                    src={src}
                    alt={`Image ${index + 1}`}
                    style={{
                      width: '100px',
                      height: '100px',
                      transform: hoveredImage === index ? 'scale(1.1)' : 'scale(1)', // 判断是否放大
                      transition: 'transform 0.3s ease', // 添加过渡效果
                    }}
                  />
                </div>
              ))}
              <div style={{
                width: '100px',
                height: '100px',
                backgroundColor: '#f5f5f5',
                padding: '10px',
                display: 'inline-block',
                marginRight: '10px',
                marginTop: '10px',
                border: 'none',
                lineHeight: ' 100px',
                textAlign: 'center',
              }}>+10</div>
            </div>
            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
              marginTop: '20px',
            }}>
              <div><h3>创意描述</h3></div>
              <div><span>试试手气</span></div>
            </div>
            <div>
              <Flex vertical gap={32}>

                <TextArea
                  showCount
                  maxLength={400}
                  onChange={onChange}
                  placeholder="disable resize"
                  style={{
                    height: 120,
                    resize: 'none',
                  }}
                />
              </Flex>
              <div>
                <span>帮我写</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span>咒语</span>
              </div>
              <div style={{ display: 'flex' }}>
                <div style={{
                  width: '150px',
                  height: '100px',
                  backgroundColor: '#f5f5f5',
                  padding: '10px',
                  display: 'flex',
                  marginRight: '10px',
                  marginTop: '10px',
                  border: 'none',
                  lineHeight: ' 100px',
                  textAlign: 'center',
                }}>
                  <div>
                    上传参考图
                  </div>
                  <div >
                    <Upload {...props} fileList={fileList}>
                      <Button style={{
                        width: '50px',
                        height: '50px',
                        marginLeft: '10px'
                      }}><UploadOutlined /></Button>
                    </Upload>
                  </div>
                </div>
                <div style={{
                  width: '100px',
                  height: '100px',
                  backgroundColor: '#f5f5f5',
                  padding: '10px',
                  display: 'flex',
                  marginRight: '10px',
                  marginTop: '10px',
                  border: 'none',
                  lineHeight: ' 100px',
                  textAlign: 'center',
                }}>
                  智能重绘<DownOutlined />
                </div>
              </div>
              <div>
                <h3>比例</h3>
                <div>
                  <button style={{
                    width: '84px',
                    height: '48px',
                    marginLeft: '10px',
                    marginTop: '5px',
                    //圆角
                    border: 'none',
                    borderRadius: '10px',
                  }}>1:1</button>
                  <button style={{
                    width: '84px',
                    height: '48px',
                    marginLeft: '10px',
                    marginTop: '5px',
                    border: 'none',
                    borderRadius: '10px',
                  }}>1:2</button>
                  <button style={{
                    width: '84px',
                    height: '48px',
                    marginLeft: '10px',
                    marginTop: '5px',
                    border: 'none',
                    borderRadius: '10px',
                  }}>4:3</button>
                  <button style={{
                    width: '84px',
                    height: '48px',
                    marginLeft: '10px',
                    marginTop: '5px',
                    border: 'none',
                    borderRadius: '10px',
                  }}>3:4</button>
                  <button style={{
                    width: '84px',
                    height: '48px',
                    marginLeft: '10px',
                    marginTop: '5px',
                    border: 'none',
                    borderRadius: '10px',
                  }}>2:1</button>
                  <button style={{
                    width: '84px',
                    height: '48px',
                    marginLeft: '10px',
                    marginTop: '5px',
                    border: 'none',
                    borderRadius: '10px',
                  }}>16:9</button>
                  <button style={{
                    width: '84px',
                    height: '48px',
                    marginLeft: '10px',
                    marginTop: '5px',
                    border: 'none',
                    borderRadius: '10px',
                  }}>9:16</button>
                  <Button style={{
                    width: '84px',
                    height: '48px',
                    marginLeft: '10px',
                    marginTop: '5px',
                    border: 'none',
                    borderRadius: '10px',
                  }}>原图比例</Button>
                </div>
              </div>
              <div>
                <h3>画质</h3>
                <div>
                  <button style={{
                    width: '84px',
                    height: '48px',
                    marginLeft: '10px',
                    marginTop: '5px',
                    border: 'none',
                    borderRadius: '10px',
                  }}>标准</button>
                  <button style={{
                    width: '84px',
                    height: '48px',
                    marginLeft: '10px',
                    marginTop: '5px',
                    border: 'none',
                    borderRadius: '10px',
                  }}>高画质</button>
                </div>
              </div>
              <div>
                <h3>数量</h3>
                <div>
                  <button style={{
                    width: '84px',
                    height: '48px',
                    marginLeft: '10px',
                    marginTop: '5px',
                    border: 'none',
                    borderRadius: '10px',
                  }}>1</button>
                  <button style={{
                    width: '84px',
                    height: '48px',
                    marginLeft: '10px',
                    marginTop: '5px',
                    border: 'none',
                    borderRadius: '10px',
                  }}>2</button>
                </div>
              </div>
              <div style={{
                marginTop: '20px',
                borderTop: '1px solid #ccc',
                position: 'sticky',
                bottom: 0, /* 吸底效果 */
                backgroundColor: '#fff',

              }}>
                <p><span>共4豆</span><span style={{
                  float: 'right',
                }}>免责声明&举报</span></p>
                <button style={{
                  width: '100%',
                  height: '48px',
                  marginTop: '10px',
                  border: 'none',
                  borderRadius: '10px',
                  backgroundColor: '#1890ff',
                  color: '#fff',
                }}>开始生成</button>
              </div>
            </div>
          </div>
          <div style={{
            width: '600px',
            height: '200vh',
            padding: '20px',
            border: '1px solid #ccc',
            margin: '20px,20px,20px,20px',
          }}>
            <div style={{
              position: 'absolute',
              // position: 'sticky',
              top: '50%',
              left: '60%',
              transform: 'translate(-50%, -50%)',
              textAlign: 'center',
            }}>
              <img src="https://cdn.dancf.com/fe-assets/img/33c1f0fef8f45949960663d9424b4523.png" alt="" />
              <h3>AI绘图</h3>
              <p>快去左侧输入你的灵感创意吧~</p>
            </div>
          </div>
        </div>
      ]
    },
    {
      id: 2, title: '素材', content: [
        <div key={2} style={{ width: '100%', height: '100%', display: 'flex', }}>
          <div style={{ width: '400px', height: '200vh', borderRight: '1px solid #ccc', padding: '20px' }}>
            <h2>AI素材</h2>
            <div>
              <Flex vertical gap={32}>

                <TextArea
                  position="absolute"
                  onChange={onChange}
                  placeholder="disable resize"
                  style={{
                    height: 120,
                    resize: 'none',
                  }}
                />
              </Flex>
              <div style={{
                position: 'relative',
                bottom: 50,
                left: 10,
                width: '100%',
                height: '48px',
              }}>
                <button style={{
                  width: '30%',
                  height: '48px',
                  border: 'none',
                  borderRadius: '10px',
                  backgroundColor: '#1890ff',
                  color: '#fff',
                }}>高级创作</button>&nbsp;&nbsp;&nbsp;&nbsp;
                <button style={{
                  width: '30%',
                  height: '48px',
                  border: 'none',
                  borderRadius: '10px',
                  backgroundColor: '#1890ff',
                  color: '#fff',
                  marginLeft: '120px',
                }}>一键生成</button>
              </div>
              <div>
                <div style={{ display: 'flex' }}>
                  <div><b>七夕</b></div>
                  <div style={{ marginLeft: '300px' }}>查看更多</div>
                </div>
                <div style={{
                  display: 'flex',
                  flexWrap: 'wrap',
                }}>
                  {image2.map((item, index) => {
                    return (
                      <div key={index} style={{ width: '100px', height: '100px', margin: '10px' }}>
                        <img style={{
                          width: '100px',
                          height: '100px',
                        }} src={item} alt="" />
                      </div>
                    )
                  })
                  }
                </div>
                <div style={{ display: 'flex' }}>
                  <div><b>大暑小暑</b></div>
                  <div style={{ marginLeft: '260px' }}>查看更多</div>
                </div>
                <div style={{
                  display: 'flex',
                  flexWrap: 'wrap',
                }}>
                  {image2.map((item, index) => {
                    return (
                      <div key={index} style={{ width: '100px', height: '100px', margin: '10px' }}>
                        <img style={{
                          width: '100px',
                          height: '100px',
                        }} src={item} alt="" />
                      </div>
                    )
                  })
                  }
                </div>
                <div style={{ display: 'flex' }}>
                  <div><b>夏至</b></div>
                  <div style={{ marginLeft: '300px' }}>查看更多</div>
                </div>
                <div style={{
                  display: 'flex',
                  flexWrap: 'wrap',
                }}>
                  {image2.map((item, index) => {
                    return (
                      <div key={index} style={{ width: '100px', height: '100px', margin: '10px' }}>
                        <img style={{
                          width: '100px',
                          height: '100px',
                        }} src={item} alt="" />
                      </div>
                    )
                  })
                  }
                </div>
                <div style={{ display: 'flex' }}>
                  <div><b>夏天</b></div>
                  <div style={{ marginLeft: '300px' }}>查看更多</div>
                </div>
                <div style={{
                  display: 'flex',
                  flexWrap: 'wrap',
                }}>
                  {image2.map((item, index) => {
                    return (
                      <div key={index} style={{ width: '100px', height: '100px', margin: '10px' }}>
                        <img style={{
                          width: '100px',
                          height: '100px',
                        }} src={item} alt="" />
                      </div>
                    )
                  })
                  }
                </div>
                <div style={{ display: 'flex' }}>
                  <div><b>插画人物</b></div>
                  <div style={{ marginLeft: '260px' }}>查看更多</div>
                </div>
                <div style={{
                  display: 'flex',
                  flexWrap: 'wrap',
                }}>
                  {image2.map((item, index) => {
                    return (
                      <div key={index} style={{ width: '100px', height: '100px', margin: '10px' }}>
                        <img style={{
                          width: '100px',
                          height: '100px',
                        }} src={item} alt="" />
                      </div>
                    )
                  })
                  }
                </div>
                <div style={{ display: 'flex' }}>
                  <div><b>3D人物</b></div>
                  <div style={{ marginLeft: '260px' }}>查看更多</div>
                </div>
                <div style={{
                  display: 'flex',
                  flexWrap: 'wrap',
                }}>
                  {image2.map((item, index) => {
                    return (
                      <div key={index} style={{ width: '100px', height: '100px', margin: '10px' }}>
                        <img style={{
                          width: '100px',
                          height: '100px',
                        }} src={item} alt="" />
                      </div>
                    )
                  })
                  }
                </div>
                <div style={{ display: 'flex' }}>
                  <div><b>氛围装饰</b></div>
                  <div style={{ marginLeft: '260px' }}>查看更多</div>
                </div>
                <div style={{
                  display: 'flex',
                  flexWrap: 'wrap',
                }}>
                  {image2.map((item, index) => {
                    return (
                      <div key={index} style={{ width: '100px', height: '100px', margin: '10px' }}>
                        <img style={{
                          width: '100px',
                          height: '100px',
                        }} src={item} alt="" />
                      </div>
                    )
                  })
                  }
                </div>
                <div style={{ display: 'flex' }}>
                  <div><b>花卉植物</b></div>
                  <div style={{ marginLeft: '260px' }}>查看更多</div>
                </div>
                <div style={{
                  display: 'flex',
                  flexWrap: 'wrap',
                }}>
                  {image2.map((item, index) => {
                    return (
                      <div key={index} style={{ width: '100px', height: '100px', margin: '10px' }}>
                        <img style={{
                          width: '100px',
                          height: '100px',
                        }} src={item} alt="" />
                      </div>
                    )
                  })
                  }
                </div>
                <div style={{ display: 'flex' }}>
                  <div><b>动物元素</b></div>
                  <div style={{ marginLeft: '260px' }}>查看更多</div>
                </div>
                <div style={{
                  display: 'flex',
                  flexWrap: 'wrap',
                }}>
                  {image2.map((item, index) => {
                    return (
                      <div key={index} style={{ width: '100px', height: '100px', margin: '10px' }}>
                        <img style={{
                          width: '100px',
                          height: '100px',
                        }} src={item} alt="" />
                      </div>
                    )
                  })
                  }
                </div>
              </div>
            </div>
          </div>
          <div style={{
            width: '800px',
            height: '200vh',
          }}>
            <div style={{
              position: 'absolute',
              // position: 'sticky',
              top: '50%',
              left: '60%',
              transform: 'translate(-50%, -50%)',
              textAlign: 'center',
            }}>
              <img src="https://cdn.dancf.com/fe-assets/20230402/268b5161b5f09f2fb884784333ac89c0.png" alt="" />
              <h3>AI素材</h3>
              <p>快去左侧选择模版快速「做同款」或输入你的灵感创意吧~</p>
            </div>
          </div>
        </div>
      ]
    },
    {
      id: 3, title: '文案', content: [
        <div key={3} style={{ width: '100%', height: '100%', display: 'flex', }}>
          <div style={{ width: '400px', height: '200vh', borderRight: '1px solid #ccc', padding: '20px' }}>
            <h2>文案生成</h2>
            <div>
              <h3>过年啦</h3>
              <div style={{
                display: 'flex',
              }}>
                <div style={{
                  width: '150px',
                  height: '60px',
                  backgroundColor: '#ddd',
                  borderRadius: '15%',
                  textAlign: 'center',
                  lineHeight: '60px',
                  fontWeight: 'bold',
                }}>拜年词</div>
                <div style={{
                  width: '150px',
                  height: '60px',
                  backgroundColor: '#ddd',
                  borderRadius: '15%',
                  textAlign: 'center',
                  lineHeight: '60px',
                  marginLeft: '20px',
                  //字体加粗
                  fontWeight: 'bold',
                }}>节日祝福文案</div>
              </div>
            </div>
            <div>
              <h3>小红书</h3>
              <div style={{
                display: 'flex',
                flexWrap: 'wrap',

              }}>
                <div style={{
                  width: '150px',
                  height: '60px',
                  backgroundColor: '#ddd',
                  borderRadius: '15%',
                  textAlign: 'center',
                  lineHeight: '60px',
                  fontWeight: 'bold',
                  marginTop: '10px',
                }}>灵感选题</div>
                <div style={{
                  width: '150px',
                  height: '60px',
                  backgroundColor: '#ddd',
                  borderRadius: '15%',
                  textAlign: 'center',
                  lineHeight: '60px',
                  marginLeft: '20px',
                  marginTop: '10px',
                  fontWeight: 'bold',
                }}>写笔记</div>
                <div style={{
                  width: '150px',
                  height: '60px',
                  backgroundColor: '#ddd',
                  borderRadius: '15%',
                  textAlign: 'center',
                  lineHeight: '60px',
                  // marginLeft: '10px',
                  marginTop: '10px',
                  fontWeight: 'bold',
                }}>写标题</div>
                <div style={{
                  width: '150px',
                  height: '60px',
                  backgroundColor: '#ddd',
                  borderRadius: '15%',
                  textAlign: 'center',
                  lineHeight: '60px',
                  marginLeft: '20px',
                  marginTop: '10px',
                  fontWeight: 'bold',
                }}>笔记加emoji</div>
              </div>
            </div>
            <div>
              <h3>公众号</h3>
              <div style={{
                display: 'flex',
              }}>
                <div style={{
                  width: '150px',
                  height: '60px',
                  backgroundColor: '#ddd',
                  borderRadius: '15%',
                  textAlign: 'center',
                  lineHeight: '60px',
                  fontWeight: 'bold',
                }}>写文章</div>
                <div style={{
                  width: '150px',
                  height: '60px',
                  backgroundColor: '#ddd',
                  borderRadius: '15%',
                  textAlign: 'center',
                  lineHeight: '60px',
                  marginLeft: '20px',
                  //字体加粗
                  fontWeight: 'bold',
                }}>写标题</div>
              </div>
            </div>
            <div>
              <h3>短视频</h3>
              <div style={{
                display: 'flex',
                flexWrap: 'wrap',

              }}>
                <div style={{
                  width: '150px',
                  height: '60px',
                  backgroundColor: '#ddd',
                  borderRadius: '15%',
                  textAlign: 'center',
                  lineHeight: '60px',
                  fontWeight: 'bold',
                  marginTop: '10px',
                }}>写标题</div>
                <div style={{
                  width: '150px',
                  height: '60px',
                  backgroundColor: '#ddd',
                  borderRadius: '15%',
                  textAlign: 'center',
                  lineHeight: '60px',
                  marginLeft: '20px',
                  marginTop: '10px',
                  fontWeight: 'bold',
                }}>口播视频脚本</div>
                <div style={{
                  width: '150px',
                  height: '60px',
                  backgroundColor: '#ddd',
                  borderRadius: '15%',
                  textAlign: 'center',
                  lineHeight: '60px',
                  // marginLeft: '10px',
                  marginTop: '10px',
                  fontWeight: 'bold',
                }}>剪辑视频脚本</div>
                <div style={{
                  width: '150px',
                  height: '60px',
                  backgroundColor: '#ddd',
                  borderRadius: '15%',
                  textAlign: 'center',
                  lineHeight: '60px',
                  marginLeft: '20px',
                  marginTop: '10px',
                  fontWeight: 'bold',
                }}>剧情视频脚本</div>
              </div>
            </div>
            <div>
              <h3>朋友圈</h3>
              <div style={{
                display: 'flex',
                flexWrap: 'wrap',

              }}>
                <div style={{
                  width: '150px',
                  height: '60px',
                  backgroundColor: '#ddd',
                  borderRadius: '15%',
                  textAlign: 'center',
                  lineHeight: '60px',
                  fontWeight: 'bold',
                  marginTop: '10px',
                }}>产品宣传文案</div>
                <div style={{
                  width: '150px',
                  height: '60px',
                  backgroundColor: '#ddd',
                  borderRadius: '15%',
                  textAlign: 'center',
                  lineHeight: '60px',
                  marginLeft: '20px',
                  marginTop: '10px',
                  fontWeight: 'bold',
                }}>正能量鸡汤</div>
                <div style={{
                  width: '150px',
                  height: '60px',
                  backgroundColor: '#ddd',
                  borderRadius: '15%',
                  textAlign: 'center',
                  lineHeight: '60px',
                  // marginLeft: '10px',
                  marginTop: '10px',
                  fontWeight: 'bold',
                }}>销售激励文案</div>
                <div style={{
                  width: '150px',
                  height: '60px',
                  backgroundColor: '#ddd',
                  borderRadius: '15%',
                  textAlign: 'center',
                  lineHeight: '60px',
                  marginLeft: '20px',
                  marginTop: '10px',
                  fontWeight: 'bold',
                }}>晒图文案</div>
                <div style={{
                  width: '150px',
                  height: '60px',
                  backgroundColor: '#ddd',
                  borderRadius: '15%',
                  textAlign: 'center',
                  lineHeight: '60px',
                  marginTop: '10px',
                  fontWeight: 'bold',
                }}>金融保险文案</div>
                <div style={{
                  width: '150px',
                  height: '60px',
                  backgroundColor: '#ddd',
                  borderRadius: '15%',
                  textAlign: 'center',
                  lineHeight: '60px',
                  marginLeft: '20px',
                  marginTop: '10px',
                  fontWeight: 'bold',
                }}>教育培训文案</div>
              </div>
            </div>
            <div>
              <h3>社群</h3>
              <div style={{
                display: 'flex',
                flexWrap: 'wrap',

              }}>
                <div style={{
                  width: '150px',
                  height: '60px',
                  backgroundColor: '#ddd',
                  borderRadius: '15%',
                  textAlign: 'center',
                  lineHeight: '60px',
                  fontWeight: 'bold',
                  marginTop: '10px',
                }}>产品营销文案</div>
                <div style={{
                  width: '150px',
                  height: '60px',
                  backgroundColor: '#ddd',
                  borderRadius: '15%',
                  textAlign: 'center',
                  lineHeight: '60px',
                  marginLeft: '20px',
                  marginTop: '10px',
                  fontWeight: 'bold',
                }}>新品上市文案</div>
                <div style={{
                  width: '150px',
                  height: '60px',
                  backgroundColor: '#ddd',
                  borderRadius: '15%',
                  textAlign: 'center',
                  lineHeight: '60px',
                  // marginLeft: '10px',
                  marginTop: '10px',
                  fontWeight: 'bold',
                }}>文案加emoji</div>
                <div style={{
                  width: '150px',
                  height: '60px',
                  backgroundColor: '#ddd',
                  borderRadius: '15%',
                  textAlign: 'center',
                  lineHeight: '60px',
                  marginLeft: '20px',
                  marginTop: '10px',
                  fontWeight: 'bold',
                }}>新店开业文案</div>
                <div style={{
                  width: '150px',
                  height: '60px',
                  backgroundColor: '#ddd',
                  borderRadius: '15%',
                  textAlign: 'center',
                  lineHeight: '60px',
                  marginTop: '10px',
                  fontWeight: 'bold',
                }}>周年庆文案</div>
                <div style={{
                  width: '150px',
                  height: '60px',
                  backgroundColor: '#ddd',
                  borderRadius: '15%',
                  textAlign: 'center',
                  lineHeight: '60px',
                  marginLeft: '20px',
                  marginTop: '10px',
                  fontWeight: 'bold',
                }}>社群招聘文案</div>
              </div>
            </div>
            <div>
              <h3>内容社区</h3>
              <div style={{
                display: 'flex',
              }}>
                <div style={{
                  width: '150px',
                  height: '60px',
                  backgroundColor: '#ddd',
                  borderRadius: '15%',
                  textAlign: 'center',
                  lineHeight: '60px',
                  fontWeight: 'bold',
                }}>探店点评文案</div>
                <div style={{
                  width: '150px',
                  height: '60px',
                  backgroundColor: '#ddd',
                  borderRadius: '15%',
                  textAlign: 'center',
                  lineHeight: '60px',
                  marginLeft: '20px',
                  //字体加粗
                  fontWeight: 'bold',
                }}>粉丝应援告白</div>
              </div>
            </div>
            <div>
              <h3>办公</h3>
              <div style={{
                display: 'flex',
                flexWrap: 'wrap',

              }}>
                <div style={{
                  width: '150px',
                  height: '60px',
                  backgroundColor: '#ddd',
                  borderRadius: '15%',
                  textAlign: 'center',
                  lineHeight: '60px',
                  fontWeight: 'bold',
                  marginTop: '10px',
                }}>周报日报文案</div>
                <div style={{
                  width: '150px',
                  height: '60px',
                  backgroundColor: '#ddd',
                  borderRadius: '15%',
                  textAlign: 'center',
                  lineHeight: '60px',
                  marginLeft: '20px',
                  marginTop: '10px',
                  fontWeight: 'bold',
                }}>员工活动文案</div>
                <div style={{
                  width: '150px',
                  height: '60px',
                  backgroundColor: '#ddd',
                  borderRadius: '15%',
                  textAlign: 'center',
                  lineHeight: '60px',
                  // marginLeft: '10px',
                  marginTop: '10px',
                  fontWeight: 'bold',
                }}>招聘海报文案</div>
                <div style={{
                  width: '150px',
                  height: '60px',
                  backgroundColor: '#ddd',
                  borderRadius: '15%',
                  textAlign: 'center',
                  lineHeight: '60px',
                  marginLeft: '20px',
                  marginTop: '10px',
                  fontWeight: 'bold',
                }}>放假通知文案</div>
              </div>
            </div>
          </div>
          <div>
            <div style={{
              position: 'absolute',
              // position: 'sticky',
              top: '50%',
              left: '60%',
              transform: 'translate(-50%, -50%)',
              textAlign: 'center',
            }}>
              <img src="https://cdn.dancf.com/fe-assets/20230402/dfc974d77e6e90230ab4c0c82701fa93.png" alt="" />
              <h3>AI文案</h3>
              <p>快从左侧选择生成的文案类型吧~</p>
            </div>
          </div>
        </div>
      ]
    },
  ];

  return (
    <div>
      <div style={{
        position: 'sticky',
        top: 0, /* 吸顶效果 */
        left: 0,
        right: 0,
        padding: '10px 20px',
        transition: 'all 0.3s ease',
        zIndex: 1000,
      }}><img src="https://cdn.dancf.com/fe-assets/20240415/f522b2e1febe18e1781c14db2e9e1864.svg" alt="" /></div>
      <div style={{
        height: '100vh',
        display: 'flex',
      }}>
        <div style={{
          width: '60px',
          borderRight: '1px solid #ccc',
          position: 'sticky',
          top: 0, /* 吸顶效果 */
          padding: '20px',
          border: '1px solid #ddd',
          boxShadow: '0 2px 10px rgba(0, 0, 0, 0.1)'
        }}>
          <ul style={{ listStyleType: 'none', padding: 0 }}>
            {tabs.map(tab => (
              <li
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                style={{
                  padding: '10px',
                  cursor: 'pointer',
                  textAlign: 'center',
                  backgroundColor: activeTab === tab.id ? '#ddd' : 'transparent',
                  marginBottom: '5px',
                }}
              >
                <HomeOutlined /><br />
                {tab.title}
              </li>
            ))}
          </ul>
        </div>

        <div style={{
          flexGrow: 1,
          padding: '10px',
          overflowY: 'auto',
          height: '100 %',
          maxHeight: '100vh'
        }}>
          <div>{tabs[activeTab].content}</div>
        </div>
      </div>
    </div >
  )
}
export default AlDesign
